<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false" %>

<!-- 引入统一样式文件 -->
<link rel="stylesheet" href="../static/css/library-common.css">

<div class="card">
    <button class="btn btn-primary" onclick="openAddModal()">新增</button>

    <!-- 搜索表单 -->
    <div class="search-bar">
        <form action="user" method="get">
            <input type="text" name="username" placeholder="输入用户名" value="${param.username}"/>
            <input type="text" name="phone" placeholder="输入手机号码" value="${param.phone}"/>
            <input type="text" name="email" placeholder="输入邮箱" value="${param.email}"/>
            <select name="role">
                <option value="">选择角色</option>
                <option value="ADMIN" ${param.role == 'ADMIN' ? 'selected' : ''}>管理员</option>
                <option value="USER" ${param.role == 'USER' ? 'selected' : ''}>普通用户</option>
            </select>
            <button type="submit" class="btn btn-primary">搜索</button>
        </form>
    </div>

    <!-- 用户表格 -->
    <table>
        <thead>
        <tr>
            <th>序号</th>
            <th>用户名</th>
            <th>邮箱</th>
            <th>手机号</th>
            <th>角色</th>
            <th>创建时间</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <c:forEach items="${users}" var="user" varStatus="status">
            <tr align="center">
                <td>${status.count}</td>
                <td>${user.username}</td>
                <td>${user.email}</td>
                <td>${user.phone}</td>
                <td>
                    <c:if test="${user.role == 'ADMIN'}">
                        <span class="role-admin">管理员</span>
                    </c:if>
                    <c:if test="${user.role != 'ADMIN'}">
                        <span class="role-user">普通用户</span>
                    </c:if>
                </td>
                <td>${user.createdAt}</td>
                <td>
                    <a href="javascript:void(0)"
                       onclick="openEditModal(${user.id}, '${user.username}', '${user.email}', '${user.phone}', '${user.role}')"
                       style="color: #1890ff; margin-right: 10px;">修改</a>
                    <a href="javascript:void(0)" onclick="showDeleteConfirm(${user.id})"
                       style="color: #ff4d4f;">删除</a>
                </td>
            </tr>
        </c:forEach>
        </tbody>
    </table>
</div>

<!-- 添加用户的模态窗口 -->
<div class="modal-overlay" id="addOverlay"></div>
<div class="modal-window" id="addModal">
    <span class="close-btn" onclick="closeAddModal()">&times;</span>
    <h3 style="text-align: center; margin-bottom: 20px; color: #333;">添加新用户</h3>

    <form action="user?action=add" method="post">
        <div class="form-group">
            <label for="addUsername">用户名：</label>
            <input type="text" id="addUsername" name="username" required placeholder="请输入用户名"/>
        </div>
        <div class="form-group">
            <label for="addPassword">密码：</label>
            <input type="password" id="addPassword" name="password" required placeholder="请输入密码"/>
        </div>
        <div class="form-group">
            <label for="addEmail">邮箱：</label>
            <input type="email" id="addEmail" name="email" required placeholder="请输入邮箱"/>
        </div>
        <div class="form-group">
            <label for="addPhone">手机号：</label>
            <input type="text" id="addPhone" name="phone" placeholder="请输入手机号"/>
        </div>
        <div class="form-group">
            <label for="addRole">角色：</label>
            <select id="addRole" name="role" required>
                <option value="">选择角色</option>
                <option value="ADMIN">管理员</option>
                <option value="USER">普通用户</option>
            </select>
        </div>
        <div class="form-actions">
            <button type="submit" class="btn btn-primary">保存</button>
            <button type="button" class="btn btn-secondary" onclick="closeAddModal()">取消</button>
        </div>
    </form>
</div>

<!-- 修改用户的模态窗口 -->
<div class="modal-overlay" id="editOverlay"></div>
<div class="modal-window" id="editModal">
    <span class="close-btn" onclick="closeEditModal()">&times;</span>
    <h3 style="text-align: center; margin-bottom: 20px; color: #333;">修改用户信息</h3>

    <form action="user?action=update" method="post">
        <input type="hidden" id="editId" name="id">
        <div class="form-group">
            <label for="editUsername">用户名：</label>
            <input type="text" id="editUsername" name="username" required placeholder="请输入用户名"/>
        </div>
        <div class="form-group">
            <label for="editPassword">密码：</label>
            <input type="password" id="editPassword" name="password" placeholder="不修改请留空"/>
        </div>
        <div class="form-group">
            <label for="editEmail">邮箱：</label>
            <input type="email" id="editEmail" name="email" required placeholder="请输入邮箱"/>
        </div>
        <div class="form-group">
            <label for="editPhone">手机号：</label>
            <input type="text" id="editPhone" name="phone" placeholder="请输入手机号"/>
        </div>
        <div class="form-group">
            <label for="editRole">角色：</label>
            <select id="editRole" name="role" required>
                <option value="">选择角色</option>
                <option value="ADMIN">管理员</option>
                <option value="USER">普通用户</option>
            </select>
        </div>
        <div class="form-actions">
            <button type="submit" class="btn btn-primary">更新</button>
            <button type="button" class="btn btn-secondary" onclick="closeEditModal()">取消</button>
        </div>
    </form>
</div>

<!-- 删除确认框 -->
<div class="modal-overlay" id="deleteOverlay"></div>
<div class="confirm-dialog" id="deleteConfirm">
    <p>确定要删除该用户吗？此操作不可撤销。</p>
    <input type="hidden" id="deleteId">
    <button class="btn btn-danger" onclick="confirmDelete()">确认删除</button>
    <button class="btn btn-secondary" onclick="cancelDelete()">取消</button>
</div>

<script>
    // 添加用户模态窗口控制
    function openAddModal() {
        document.getElementById("addOverlay").style.display = "block";
        document.getElementById("addModal").style.display = "block";
    }

    function closeAddModal() {
        document.getElementById("addOverlay").style.display = "none";
        document.getElementById("addModal").style.display = "none";
    }

    // 修改用户模态窗口控制
    function openEditModal(id, username, email, phone, role) {
        // 填充表单数据
        document.getElementById("editId").value = id;
        document.getElementById("editUsername").value = username;
        document.getElementById("editEmail").value = email;
        document.getElementById("editPhone").value = phone;
        document.getElementById("editRole").value = role;

        // 显示模态框
        document.getElementById("editOverlay").style.display = "block";
        document.getElementById("editModal").style.display = "block";
    }

    function closeEditModal() {
        document.getElementById("editOverlay").style.display = "none";
        document.getElementById("editModal").style.display = "none";
    }

    // 删除确认框控制
    function showDeleteConfirm(id) {
        document.getElementById("deleteId").value = id;
        document.getElementById("deleteOverlay").style.display = "block";
        document.getElementById("deleteConfirm").style.display = "block";
    }

    function confirmDelete() {
        const id = document.getElementById("deleteId").value;
        window.location.href = "user?action=delete&id=" + id;
    }

    function cancelDelete() {
        document.getElementById("deleteOverlay").style.display = "none";
        document.getElementById("deleteConfirm").style.display = "none";
    }

    // 点击遮罩层关闭对应窗口
    document.getElementById("addOverlay").addEventListener("click", closeAddModal);
    document.getElementById("editOverlay").addEventListener("click", closeEditModal);
    document.getElementById("deleteOverlay").addEventListener("click", cancelDelete);

    // 按ESC键关闭所有窗口
    document.addEventListener("keydown", function (e) {
        if (e.key === "Escape") {
            closeAddModal();
            closeEditModal();
            cancelDelete();
        }
    });
</script>
